@color1: #107ade;
@color2: #ffffff;
.login-box {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  align-items:stretch;
  .box-left {
    width: 100%;
    min-height: 100%;
    background-image: url("~@/assets/background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .box-icon {
      position: absolute;
      left: 0px;
      top: 0px;
      bottom: 0;
      width: 117px;
      height: 122px;
      background-image: url("~@/assets/login-logo.png");
      background-repeat: no-repeat;
      background-size: contain;
    }
    .box-title {
      position: absolute;
      right: 50px;
      bottom: 60px;
      text-align: right;
      h3 {
        font-size: 38px;
        margin: 0;
      }
      h4 {
        font-size: 24px;
      }
      h3,h4 {
        color: #fff;
      }
    }
  }
  .box-right {
    width: 100%;
    min-height: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    flex: 0 0 32%;
    width: 32%;
    .login-title1 {
      font-size: 30px;
      margin-bottom: 60px;
      text-align: center;
      color: #000;
      span {
        position: relative;
        &::after {
          content:'';
          position: absolute;
          left: 0;
          right: 0;
          bottom: -14px;
          border-bottom: 4px @color1 solid;
        }
      }
    }
    .user-layout-login {
      margin: 0 80px;
      button.login-button {
        height: 50px;
        background-color: @color1;
        border-color: @color1;
      }
    }
    /deep/.autoLogin{
      margin-bottom: 1vh!important;
      .ant-checkbox-checked .ant-checkbox-inner {
          background-color: @color1;
          border-color: @color1;
      }
    }
    .login-button-item {
      margin-top:40px
    }
  }
  &.init-login-box {
    width: 100%;
    min-height: 100%;
    background-image: url("~@/assets/logo-background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    justify-content: center;
    .box-left {
      display: none;
    }
    .login-title2 {
      color: #fff;
      font-size: 30px;
      margin-bottom: 30px;
      text-align: center;
    }
    .login-title3 {
      height: 60px;
      color: #fff;
      font-size: 26px;
      text-align: center;
      font-weight: 544;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      // span {
      //   position: relative;
      //   top: 1vh;
      //   margin-top: 3vh;
      //   display: inline-block;
      // }
    }
    .box-right {
      width: 700px;
      flex: 0 0 700px;
      .box-icon {
        margin: 0 auto;
        width: 110px;
        height: 115px;
        background-image: url("~@/assets/logo.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-size: 100% 100%;
      }
      .user-layout-login {
        .form-model-layout {
          margin: 0 36px;
          background-image: url("~@/assets/login-border2.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding: 10px 50px;
          padding-bottom: 20px;
        }
        .form-model-box {
          /deep/.ant-form-item {
            margin-bottom: 16px;
            .ant-input-affix-wrapper {
              background-image: url("~@/assets/login-border-line.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            .ant-input-prefix {
              padding-left: 20px;
              i {
                color: #fff !important;
              }
            }
            .ant-input {
              color: #fff;
              text-indent: 1em;
              background-color: transparent;
              border: 0;
              &:focus,&:hover,&:-webkit-autofill {
                color: #fff;
                -webkit-text-fill-color: #fff;
                background-color: transparent;
                background-image: none;
                transition: background-color 5000s ease-in 0s;;
              }
            }
          }
   
        }
      }
      /deep/.autoLogin{
        .ant-checkbox-wrapper {
          color: #fff;
        }
      }
      button.login-button {
        height: 50px;
        width: 60%;
        background-color:transparent;
        border-color: transparent;
        border-radius: 0;
        background-repeat: no-repeat;
        background-image: url("~@/assets/login-button.png");
        background-position: center;
        &:focus,&:hover {
          background-color: transparent;
        }
      }
      .login-button-item {
        margin-top: 0;
        /deep/.ant-form-item-control {
          text-align: center;
        }
      }
    }
    /deep/.certBox{
      .ant-select-selection {
        height: 40px;
        padding-left: 43px;
        padding-top: 6px;
        background-image: url("~@/assets/login-border-line.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color:transparent;
      }
      .ant-select-selection-selected-value{
        color: #fff;
      }
    }
    /deep/.certPws{
      padding-left: 25px;
    }
  }
}

/*----------表单边框----------*/
.form-model-box {
  /deep/.ant-form-item {
    margin-bottom: 30px;
    .ant-input {
      border-width: 0;
      border-bottom-width: 1px;
      border-radius: 0;
      &:focus,&:hover {
        border-right-width: 0 !important;
        box-shadow: inherit;
      }
    }
  }
}
/deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 40px;
}

/*----------原样式----------*/
.user-layout-login {
  label {
    font-size: 14px;
  }
.getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

.forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

.user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

  .item-icon {
      font-size: 24px;
      color: rgba(0,0,0,.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color .3s;

    &:hover {
        color: #1890ff;
      }
    }

  .register {
      float: right;
    }
  }
}